<template>
    <div>
        <el-dialog
            title="选择合同模板"
            :visible.sync="dialogVisible"
            width="50%"
            :close-on-click-modal="false">
            <div>
                <el-row>
                    <el-col :span="4">合同类型:</el-col>
                    <el-col :span="20">
                        <el-radio-group v-model="contractType" class="hideCircle"  size="small">
                            <el-radio :label="item.value" v-for="item in contractTypes" border :key="item.value">{{item.label}}</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="4">合同细类:</el-col>
                    <el-col :span="20">
                        <el-radio-group v-model="contractDetail">
                            <el-radio style="margin-bottom:10px;" :label="item.value" v-for="item in contractSubTypes" :key="item.value">{{item.label}}</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="next">确定下一步</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "contract-type-select",
    data() {
        return {
            // 合同类型
            contractType:'',
            // 合同细类
            contractDetail:'',
            dialogVisible:false,
        }
    },

    computed: {
        // 合同类型列表
        contractTypes(){
            return this.getDict('rent_contract_type').filter(it => it.value !== '04')
        },
        // 合同细类列表
        contractSubTypes(){
            return {
                '01': this.getDict('rent_contract_sub_type').filter(it => it.value === '3'),
                '02': this.getDict('rent_contract_sub_type').filter(it => it.value !== '3' && it.value !== '9'),
                '03': this.getDict('rent_contract_sub_type').filter(it => it.value === '9')
            }[this.contractType]
        }
    },
    watch: {
        contractType(val){
            if(!this.contractSubTypes.length) return;
            this.contractDetail = this.contractSubTypes[0].value
        }
    },
    methods:{
        show() {
            this.dialogVisible = true;
            this.contractType = this.contractTypes.length ? this.contractTypes[0].value : ''
        },
        next(){
            if (this.contractType!='' && this.contractDetail!='') {
                this.$parent.$router.push({path: "/wy-rent/contract/edit?optype=add&type=" + this.contractType + "&subtype=" + this.contractDetail});
            }else {
                this.$alert("请选择合同模板和合同细类")
            }
        }
    }

}
</script>
<style scoped lang="scss">
    @include formWrap();
    .hideCircle{
        /deep/ .el-radio{
            min-width: 150px;
            padding: 0;
            border-radius: 2px;
            line-height: 30px;
            text-align: center;
            position: relative;
            overflow: hidden;
            &:after{
                content:'';
                width: 20px;
                height: 20px;
                background-color: #409EFF;
                position: absolute;
                right: -10px;
                bottom: -10px;
                transform: rotate(45deg);
                display: none;
            }
            &.is-checked{
                border: 1px solid #409EFF;
                &:after{display: block;}
            }
            .el-radio__inner{
                display: none;
            }
            .el-radio__label{
                font-size: 14px;
            }
        }
    }
</style>


